<script setup>
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
import { theme } from "../assets/js/theme.js";

const props = defineProps(["barData", "province"]);
const emit = defineEmits([]);

var option;
var myChart;

option = {
  title: {
    textStyle: {
      fontWeight: "860",
      fontSize: 16,
      lineHeight: 18,
      // height: 10,
      width: 146,
      overflow: "breakAll", // 超出宽度换行
    },
    subtext: "Unit: Mt CO2",
    itemGap: 6, // 主副标题之间的差距
    top: "1.2%",
    left: ".2%",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // Use axis to trigger tooltip
      type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
    },
    // 悬浮内容限制在框内
    // confine: true,
    formatter: (params) => {
      // console.log("ssssssssssssssssssss", params)

      // legend取消某种燃料的显示后,这里params也会变,所以我们这里也需要动态改变
      let length = params.length;
      let isOdd = length % 2 != 0; // 奇数
      let obj = '<span style="display:inline-block;">';
      let total = 0;
      let space = "&nbsp;&nbsp;";
      let tab = "&nbsp;&nbsp;&nbsp;&nbsp;";

      params.map((data, index) => {
        total += data.value;
      });
      // 手动截断，四舍五入
      total = total.toFixed(2);

      if (length != 0) {
        obj += params[0].axisValue + space + total + "<br/>";
      } else {
        return;
      }

      for (let index = 1; index < length; ++index, ++index) {
        obj +=
          params[index - 1].marker +
          " " +
          params[index - 1].seriesName +
          space +
          params[index - 1].value +
          tab +
          params[index].marker +
          " " +
          params[index].seriesName +
          space +
          params[index].value +
          "<br/>";
      }

      if (isOdd) {
        obj +=
          params[length - 1].marker +
          " " +
          params[length - 1].seriesName +
          space +
          params[length - 1].value +
          "</span>";
      } else {
        obj += "</span>";
      }

      return obj;
    },
  },
  legend: {
    top: "1.8%",
    right: "3%",
    width: "42%",
    itemGap: 7,
  },
  grid: {
    top: "1%",
    left: "0%",
    right: "0%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
  },
  yAxis: {},
};

function getBarSeries() {
  return props.barData.value.map(function (item, index) {
    return {
      name: props.barData.fuelName[index],
      type: "bar",
      stack: "total",
      barMinHeight: "30%",
      barMaxHeight: "90%",
      label: {
        // show: true,
      },
      emphasis: {
        focus: "series",
      },
      data: item,
    };
  });
}

watch(
  () => [props.barData, props.province],
  () => {
    let series = getBarSeries();
    myChart.setOption(option, true);
    myChart.setOption({
      title: {
        text: props.province.name + "分部门排放数据",
      },
      yAxis: {
        type: "category",
        nameTextStyle: {
          // lineHeight: 2
          borderWidth: "2",
          width: "12",
          height: "230",
          nameLocation: "middle",
        },
        data: props.barData.departmentName,
      },
    });
    myChart.setOption({
      series,
    });
  }
);
onMounted(() => {
  myChart = echarts.init(document.getElementById("departmentBar"), theme);

  myChart.setOption(option);
});
</script>

<template>
  <div class="module">
    <div id="departmentBar"></div>
  </div>
</template>

<style lang="scss" scoped>
.module {
  height: 5rem;
  // border: 1px red solid;
  margin: 0.25rem 0.2rem 0 0.1rem;
}
#departmentBar {
  width: 100%;
  height: 100%;
}
</style>
>
